<template>
  <div class="welcome-container" :class="{ visible: welcomeVisible }">
    <div class="welcome-frame">
      <h1  class="welcome-title" :class="{ visible: welcomeVisible }">欢迎访问趣味博物馆交互系统</h1>
      <button class="login-button" @click="goToLogin">用户登录</button>
      <button class="guest-button" @click="goToVisit">访客登录</button>
      <button class="admin-button" @click="goToAdmin">管理员登录</button>
    </div>
  </div>
</template>

<script setup lang="ts" >
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { onMounted } from 'vue';

const router = useRouter();

const goToVisit = () => {
  router.push('/Visit'); // 路由跳转到主页，并通过参数传递游客登录标识
};
const welcomeVisible = ref(false);

onMounted(() => {
  setTimeout(() => {
    welcomeVisible.value = true;
  }, 500); // 0.5秒后显示欢迎信息
});

const goToLogin = () => {
  router.push('/users/login');
};

const goToAdmin = () => {
  router.push('/Admin')
}
</script>

<style scoped>
.welcome-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url('../assets/images/index-bg.jpg'); /* 确保图片路径正确 */
  background-size: cover;
  background-attachment: fixed;
  z-index: -99; /* 确保背景在内容后面 */
  backdrop-filter: blur(5px);
  transition: filter 1s; /* 渐变效果 */
}

.welcome-frame {
  background-color: white;
  color: black;
  border: 2px solid transparent; /* 初始化边框为透明 */
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  z-index: 1; /* 确保欢迎框在背景上面 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.welcome-title {
  margin-bottom: 20px;
  font-size: 6em;
  opacity: 100%; /* 初始状态不可见 */
  transition: opacity 0.5s, transform 0.5s; /* 渐变效果 */
  color: black;
  z-index: 2;
}

.login-button, .guest-button, .admin-button{
  padding: 10px 20px;
  margin: 5px;
  border: none;
  font-size: 4em;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  text-align: center;
  justify-content: center;
  display: flex;
  width: 50%;
}

.login-button {
  background-color: black;
  color: white;
}

.guest-button, .admin-button {
  background-color: black;
  color: white;
  margin-top: 10px;
}

.login-button:hover, .guest-button:hover {
  background-color: #6b3e15;
}

.login-button:active, .guest-button:active {
  transform: scale(0.98);

}
</style>